<template>
  <div class="pagestyle">
    <p><span>历史风机查询</span>
      <el-button type="primary" @click="configClick">配置</el-button>
    </p>
    <div v-if="state.list.length==0" style="text-align: center;display:flex;flex-direction: column;align-items: center;
    margin-top: 100px;
    justify-content:center;">
      <img src="@/assets/images/空白.png" />
      <p>暂未查询到结果</p>
    </div>
    <div class="tableList" v-else>
      <div class="tableBox" :style="{width:state.list.length==1?'100%':'49%'}" v-for="(item,index) in state.list"
        :key="index">
        <div style="padding: 4px 0;">
          <span>编号:{{ item.pointId }}</span>
          <span style="margin-left: 20px;">地点:{{ item.placeName }}</span>
        </div>
        <vxe-table :height="state.list.length<3?'100%':300" class="w100" :data="item.list" border="inner">
          <vxe-column field="sensorName" title="名称"></vxe-column>
          <vxe-column field="pointValueStr" title="状态"></vxe-column>
          <vxe-column field="startTime" title="开始时间"></vxe-column>
          <vxe-column field="endTime" title="结束时间"></vxe-column>
        </vxe-table>
      </div>
    </div>
    <!-- <teleport to="body"> -->
    <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="860" :height="auto" v-model="state.addModal"
       resize :mask="true" showFooter>
      <template #title>
        <div class="w100 h100 fsc mask_title">风机配置</div>
      </template>
      <template #default>
        <div class="form_box">
          <el-form ref="formRef"  :model="state.formData" :rules="state.rulesForm" label-position="left">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="名称">
                  <el-input v-model="state.formData.sensorName" clearable placeholder="请输入" @blur="querySearch">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="地点">
                  <el-select filterable v-model="state.formData.placeName" clearable placeholder="请选择"
                    @change="querySearch">
                    <el-option v-for="item in state.stationmodelList" :key="item.placeName" :label="item.placeName"
                      :value="item.placeName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="测点">
                  <el-select filterable v-model="state.formData.pointIds" clearable placeholder="请选择"
                    @change="querySearch">
                    <el-option v-for="item in state.stationInNumList" :key="item.pointId" :label="item.pointId"
                      :value="item.pointId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="">
                  <vxe-table height="300" class="w100" :data="state.formData.noConfiguredPointList" border="inner"
                    @checkbox-change="checkchange1">
                    <vxe-column type="checkbox" width="42"></vxe-column>
                    <vxe-column field="pointId" title="编号"></vxe-column>
                    <vxe-column field="sensorName" title="设备名"></vxe-column>
                    <vxe-column field="placeName" title="安装地点"></vxe-column>
                  </vxe-table>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <div class="fdcc h100">
                  <span class="spanBox1 hover" @click="confirmClick">
                    <svg-icon class-name="search-icon" icon-class="xinzeng" />添加
                  </span>
                  <span class="spanBox1 spanBox2 hover" @click="cancelClick" style="margin-top: 10px">
                    <span>
                      <svg-icon class-name="search-icon" icon-class="tubiaoneiguanbi" />
                      移除</span></span>
                </div>
              </el-col>
              <el-col :span="10">
                <el-form-item label="">
                  <vxe-table height="300" class="w100" :data="state.formData.configuredPointList"
                    :checkbox-config="checkboxConfig" @checkbox-change="selectChangeEvent" border="inner">
                    <vxe-column type="checkbox" width="42"> </vxe-column>
                    <vxe-column field="pointId" title="编号"></vxe-column>
                    <vxe-column field="sensorName" title="设备名"></vxe-column>
                    <vxe-column field="placeName" title="安装地点"></vxe-column>
                  </vxe-table>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="时间范围" prop="timeValue">
                  <el-date-picker v-model="state.formData.timeValue" type="datetimerange" start-placeholder="开始时间"
                    end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">
          查询
        </el-button>
      </template>
    </vxe-modal>
    <!-- </teleport> -->
  </div>
</template>
<script setup>
  import {
    computed,
    onMounted,
    reactive
  } from "vue";
  import axios from "@/utils/request";
  import usePagesStore from "@/store/modules/pages";
  import dayjs from "dayjs";
  import {
    getaddressInfo,
    getinfosearchlistSwitch
  } from "@/api/config";
  import _ from 'lodash'
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore();
  const router = useRouter();
  let previewHttps =
    import.meta.env.VITE_APP_HTTP;
  // 表格禁用状态
  const checkboxConfig = reactive({
    visibleMethod({
      row
    }) {
      return !row.selected;
    },
  });
  let state = reactive({
    list: [],
    queryObj: {
      pageNum: 1,
      pageSize: 10,
      startTime: '',
      endTime: '',
      pointId: ''
    },
    addModal: false,
    formData: {
      timeValue: [],
      configuredPointList:[]
    },
    rulesForm: {
      'timeValue': [{
        required: true,
        message: "请选择时间",
        trigger: "change",
      }],
    },
    stationmodelList: [],
    stationInNumList: [],
    areaPointList1: [],
  });

  function getSelList() {
    getaddressInfo({}).then(res => {
      state.stationmodelList = res.data.list
    })
    getinfosearchlistSwitch({}).then(res => {
      state.stationInNumList = res.data
      state.formData.noConfiguredPointList = res.data
    })
  }

  function querySearch() {
    getinfosearchlistSwitch(state.formData).then(res => {
      state.formData.noConfiguredPointList = res.data
    })
  }
  getSelList()

  function configClick() {
    state.addModal = true
  }

  function selectChangeEvent(e) {
    state.areaPointList1 = e.records;
  }

  function checkchange1(e) {
    let arr = e.records;
    state.confirmList = arr;
  }

  function confirmClick() {
    if (state.formData.configuredPointList == null) {
      state.formData.configuredPointList = [];
    }
    state.formData.noConfiguredPointList =
      state.formData.noConfiguredPointList.filter(
        (el) => !state.confirmList.includes(el)
      );
    state.formData.configuredPointList =
      state.formData.configuredPointList.concat(state.confirmList);
    state.formData.configuredPointList = _.uniqBy(state.formData.configuredPointList)
  }

  function cancelClick() {
    state.formData.configuredPointList =
      state.formData.configuredPointList.filter(
        (el) => !state.areaPointList1.includes(el)
      );
    state.formData.noConfiguredPointList =
      state.formData.noConfiguredPointList.concat(state.areaPointList1);
    state.formData.noConfiguredPointList = _.uniqBy(state.formData.noConfiguredPointList)
  }

  function cancel() {
    state.addModal = false
  }

  function listPointsBySensorName() {
    return new Promise(resolve => {
      axios.post('/hisPointSwitch/listDetailSwitch', state.queryObj).then(res => {
        resolve(res.data.list)
      })
    })
  }

  function submitForm() {
    proxy.$refs["formRef"].validate(valid => {
      if (valid) {
        if (state.formData.timeValue.length > 0) {
          state.queryObj.startTime = dayjs(state.formData.timeValue[0]).format('YYYY-MM-DD HH:mm:ss.000')
          state.queryObj.endTime = dayjs(state.formData.timeValue[1]).format('YYYY-MM-DD HH:mm:ss.000')
          state.list = []
          if(state.formData.configuredPointList.length>0){
            if (state.formData.configuredPointList.length < 5) {
              state.formData.configuredPointList.forEach(async item => {
                state.queryObj.pointId = item.pointId
                let data = await listPointsBySensorName()
                state.list.push({
                  pointId: item.pointId,
                  placeName: item.placeName,
                  list: data
                })
              })
              state.addModal = false
            } else {
              proxy.$modal.msgWarning('只能选择四条数据');
              state.addModal = true
            }
          }else{
            proxy.$modal.msgWarning('请先添加数据!');
          }
        }
      }
    })

  }
  onMounted(() => {});
</script>
<style lang="scss" scoped>
  .tableList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;



    .tableBox {
      margin-right: 10px;
    }
  }

  .pagestyle {
    height: calc(100vh - 150px) !important;
    background-color: rgba(255, 255, 255, .8);
    margin: 10px;
    border-radius: 8px;

    p {
      display: flex;
      justify-content: space-between;

      span {
        font-size: 18px;
        font-weight: 700;
        color: rgba(62, 70, 79, 1);
      }
    }
  }
</style>